<template>
	<view>
		<u-popup  v-model="manageshow" mode="bottom" width="100%" ref="auth" :mask-close-able="false" :custom="true" :mask-click="false" @close="closemanage">
            <view class="popone" v-if="managestatus ==1 ">
                <view class="phonenav">
                    <view class="cha" @click="closemanage">
                        <image class="icon_gbcha" src="@/pages_admin/static/icon_gbcha.png" mode="" />
                    </view>
                    <view class="kaiview">
                        <text class="jiename">开工码</text>
                        <u-switch class="kaiswitch" size="40" v-model="checked" active-color="#FF4D43"></u-switch>
                    </view>
                    <text class="kaimiao">防止员工提前开工，欺诈打卡</text>
                    <view class="lone">
                        <view class="shu">1</view>
                        <text class="ltxt">员工输入开工码后，才能开工</text>
                    </view>
                    <view class="lone">
                        <view class="shu">2</view>
                        <text class="ltxt">确认员工到现场后，您可将4位数字开工码报给员工。</text>
                    </view>
                    <view class="dianbtn" @click="getquedin()">
                        <text class="bm">确认</text>
                    </view>
                </view>
                
            </view>
            <view class="popone" v-if="managestatus ==2 ">
                <view class="phonenav">
                    <view class="cha" @click="closemanage">
                        <image class="icon_gbcha" src="@/pages_admin/static/icon_gbcha.png" mode="" />
                    </view>
                    <view class="kaiview">
                        <text class="jiename">人脸打卡</text>
                        <u-switch class="kaiswitch" size="40" v-model="lianchecked" active-color="#FF4D43"></u-switch>
                    </view>
                    <text class="kaimiao">员工打卡需拍照，验证人脸，确保本人干活</text>
                    <view class="renlian">
                        <image class="img_rlts" src="@/pages_admin/static/img_rlts.png" mode="" />
                        <text>员工需要扫描人脸，才能开工</text>
                    </view>
                    <view class="dianbtn" @click="getquedin()">
                        <text class="bm">确认</text>
                    </view>
                </view>
                
            </view>
            <view class="popone" style="background-color: #F5F5F5;" v-if="managestatus ==3 ">
                <view class="phonenav">
                    <view class="cha" @click="closemanage">
                        <image class="icon_gbcha" src="@/pages_admin/static/icon_gbcha.png" mode="" />
                    </view>
                    <view class="kaiview">
                        <text class="jiename">计薪工时</text>
                    </view>
                    <text class="kaimiao">注意：休息时间均不算工时</text>
                    <view class="jishi">
                        <view class="shiitem" @click="gettime(1)">
                            <view class="shione">
                                <text class="ygname">按员工打卡时间</text>
                                <image class="icon_xz_s" v-if="newtimed==1" src="@/pages_admin/static/icon_xz_s.png" mode="" />
                                <image class="icon_xz_s" v-else src="@/pages_admin/static/icon_xz_n.png" mode="" />
                            </view>
                            <image class="dakaone" src="@/pages_admin/static/dakaone.png" mode="" />
                        </view>
                        <view class="shiitem"  @click="gettime(2)">
                            <view class="shione">
                                <text class="ygname">按工作设定时间</text>
                                <image class="icon_xz_s" v-if="newtimed==2" src="@/pages_admin/static/icon_xz_s.png" mode="" />
                                <image class="icon_xz_s" v-else src="@/pages_admin/static/icon_xz_n.png" mode="" />
                            </view>
                            <image class="dakaone" src="@/pages_admin/static/dakatwo.png" mode="" />
                        </view>
                    </view>
                    <view class="dianbtn" @click="getquedin">
                        <text class="bm">确认</text>
                    </view>
                </view>
                
            </view>
            <view class="popone" v-if="managestatus ==4 ">
                <view class="phonenav">
                    <view class="cha" @click="closemanage">
                        <image class="icon_gbcha" src="@/pages_admin/static/icon_gbcha.png" mode="" />
                    </view>
                    <view class="kaiview">
                        <text class="jiename">上传证件照</text>
                        <u-switch class="kaiswitch" size="40" v-model="zjzchecked" active-color="#FF4D43"></u-switch>
                    </view>
                    <text class="kaimiao">开启后员工需上传专业证件照</text>
                    <view class="renlian">
                        <image class="img_sczjz" src="@/pages_admin/static/img_sczjz.png" mode="widthFix" />
                        <!-- <text>开启后员工需上传专业证件照</text> -->
                    </view>
                    <view class="dianbtn" @click="getquedin()">
                        <text class="bm">确认</text>
                    </view>
                </view>
                
            </view>
        </u-popup>
	</view>
</template>

<script>
	export default {
		name: 'ConfirmOrderPop',
		props: {
			manageshow: {
				type: Boolean,
				default: false
			},
            managestatus:{
                type:Number/String,
                default:1////1开工码  2人脸 3计时工薪 4证件照
            },
            start_code:{
                type:Number/String,
                default:''//1//
            },
            is_facial:{
                type:Number/String,
                default:''//1是 0否 是否需要人脸
            },
            timed:{
                type:Number/String,
                default:''//1按员工打卡时间 2按工作设定时间
            },
            

		},
		data() {
			return {
                checked:false,
                lianchecked:false,
                newtimed:'',
                zjzchecked:false
			};
		},
		created() {
			
		},
		mounted() {

		},
		methods: {
            closemanage(){
                this.$emit("closemanage")
            },
            getquedin(){
                if(this.managestatus ==1){
                    //开工码
                    this.$emit("getquedin",{
                        managestatus:this.managestatus,
                        checked:this.checked
                    })
                }else if(this.managestatus ==2){
                    //人脸
                    this.$emit("getquedin",{
                        managestatus:this.managestatus,
                        checked:this.lianchecked
                    })
                }else if(this.managestatus ==3){
                    //时薪
                    this.$emit("getquedin",{
                        managestatus:this.managestatus,
                        timed:this.newtimed
                    })
                }else if(this.managestatus ==4){
                    //人脸
                    this.$emit("getquedin",{
                        managestatus:this.managestatus,
                        checked:this.zjzchecked
                    })
                }
                
            },
            gettime(e){
                // this.$emit("gettime",e)
                this.newtimed = e
            }
		}
	};
</script>

<style lang="scss" scoped>
    /deep/.u-drawer-bottom{
        background-color: transparent;
    }
    .queli{
        display: flex;
        flex-direction: column;
        width: 80%;
        margin: 40rpx 0rpx 70rpx;
        .queitem{
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 100%;
            .icon_xz_s{
                margin-right: 15rpx;
                width: 36rpx;
                height: 36rpx;
            }
            text{
                font-weight: 500;
                font-size: 28rpx;
                color: #111111;
            }
        }
    }
	.popone{
        width: 100%;
        background: #FFFFFF;
        border-radius: 30rpx 30rpx 0rpx 0rpx;
        // height: 530rpx;
        .kaiview{
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .kaimiao{
            font-weight: 400;
            font-size: 24rpx;
            color: #666666;
            display: block;
            margin-top: 10rpx;
            margin-bottom: 30rpx;
        }
        .kaiswitch{
            margin-left: 20rpx;
        }
        .lone{
            display: flex;
            flex-direction: row;
            align-items: center;
            // margin-top: 30rpx;
            margin-bottom: 20rpx;
            .shu{
                width: 40rpx;
                height: 40rpx;
                background: #FF5F40;
                border-radius: 50%;
                display: inline-block;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: bold;
                font-size: 28rpx;
                color: #FFFFFF;
                margin-right: 10rpx;
            }
            .ltxt{
                font-weight: 500;
                font-size: 26rpx;
                color: #333333;
            }
            .bzhang{
                display: flex;
                flex-direction: column;
                // justify-content: flex-start;
                // align-items: flex-start;

                max-width: 100%;
            }
            .ltxtmiao{
                font-weight: 500;
                font-size: 20rpx;
                color: #999999;
                display: inline-block;
            }
        }
        .bg{
            position: absolute;
            width: 100%;
            height: 300rpx;
            border-radius: 30rpx 30rpx 0 0 ;
        }
        .icon_gbcha{
            width: 40rpx;
            height: 40rpx;
            margin-left: auto;
            position: absolute;
            right: 30rpx;
            top: 30rpx;
        }
        .yuedu{
            height: 80rpx;
            display: flex;
            padding: 0 30rpx;
            align-items: center;
            .icon_xz_n{
                width: 36rpx;
                height: 36rpx;
                margin-right: 8rpx;
            }
            .xy{
                font-weight: 500;
                font-size: 20rpx;
                color: #999999;
                display: block;
                width: 90%;
            }
            .xyhu{
                color: rgba(234, 89, 24, 1);
            }
        }
        .kaolv{
            font-weight: bold;
            font-size: 28rpx;
            color: #666666;
            display: block;
            text-align: center;
            margin-top: 20rpx;
        }
        .phonenav{
            position: relative;
            // margin: 30rpx;
            display: flex;
            flex-direction: column;
            // justify-content: center;
            // align-items: center;
            padding: 40rpx 40rpx;
            .img_aq{
                width: 173rpx;
                height: 211rpx;
                margin-bottom: 20rpx;
            }
            .jiename{
                font-weight: bold;
                font-size: 36rpx;
                color: #111111;
            }
            .queren{
                font-weight: 400;
                font-size: 24rpx;
                color: #666666;
                display: block;
                margin: 40rpx 0 80rpx;
            }
            .chaka{
                padding: 30rpx;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background: #F6F7F9;
                border-radius: 16rpx;
                margin: 25rpx 0;
                .chaname{
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #111111;
                }
                .phonenum{
                    display: block;
                    font-weight: bold;
                    font-size: 50rpx;
                    color: #F06047;
                    margin: 10rpx 0;
                }
                .xiugai{
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    .noben{
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #666666;
                    }
                    .xiu{
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #F06047;
                        display: inline-block;
                        margin-left: 6rpx;
                    }
                }
            }
            .dianbtn{
                height: 90rpx;
                background: linear-gradient(90deg, #FF8F39, #FF4D43);
                border-radius: 45rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100%;
                margin-top: 40rpx;
                .bm{
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #FFFFFF;
                }
                .bmmaio{
                    font-weight: 500;
                    font-size: 20rpx;
                    color: #FFFFFF;
                }
            }
            .bzhang{
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-top: 30rpx;
                .icon_ts{
                    margin-right: 6rpx;
                    width: 24rpx;
                    height: 24rpx;
                }
                .zhiname{
                    font-weight: 400;
                    font-size: 20rpx;
                    color: #F06047;
                }
            }
        }
    }
    .renlian{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .img_rlts{
            width: 400rpx;
            height: 400rpx;
            margin-bottom: 32rpx;
        }
        .img_sczjz{
            width: 476rpx;
            height: 370rpx;
            margin-bottom: 30rpx;
        }
        text{
            font-weight: 500;
            font-size: 36rpx;
            color: #111111;
        }
    }
    .kmiao{
        font-weight: 500;
        font-size: 28rpx;
        color: #111111;
        display: block;
        margin: 40rpx 0 20rpx;
    }
    .renxie{
        font-weight: 500;
        font-size: 28rpx;
        color: #FF8C39;
        display: block;
        margin-bottom: 50rpx;
    }
    .img_cg{
        width: 140rpx;
        height: 140rpx;
        margin-bottom: 15rpx;
    }
    .yikai{
        font-weight: bold;
        font-size: 36rpx;
        color: #111111;
    }
    .kaiti{
        background: #E9FFEB;
        border-radius: 6rpx;
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 20rpx 0 15rpx;
        padding:20rpx 10rpx;
        .kaione{
            display: flex;
            flex-direction: row;
            align-items: center;
            .icON_bz{
                margin-right: 7rpx;
                width: 24rpx;
                height: 24rpx;
            }
            .jianame{
                font-weight: bold;
                font-size: 28rpx;
                color: #16B925;
            }
        }
        .youxiao{
            font-weight: 500;
            font-size: 20rpx;
            color: #16B925;
            display: block;
            margin-top: 10rpx;
        }
    }
    .jishi{
        display: flex;
        flex-direction: column;
        .shiitem{
            background: #FFFFFF;
            border-radius: 30rpx;
            padding: 30rpx;
            margin-bottom: 30rpx;
            .shione{
                display: flex;
                flex-direction: row;
                align-items: center;
                .ygname{
                    font-weight: bold;
                    font-size: 36rpx;
                    color: #111111;
                }
                .icon_xz_s{
                    margin-left: auto;
                    width: 36rpx;
                    height: 36rpx;
                }
            }
            .dakaone{
                width: 100%;
                height: 160rpx;
                margin-top: 15rpx;
            }
        }
    }
</style>
